<template>
  <div class="app-container">
    <!-- 页签 -->
    <el-tabs>
      <el-tab-pane label="角色管理">
        <el-row style="height: 60px">
          <!-- 新增角色按钮 -->
          <el-button type="primary" size="small" @click="showDialog = true"
            >新增角色</el-button
          >
        </el-row>

        <!-- 表格 -->
        <el-table stripe border="" :data="list">
          <el-table-column
            align="center"
            label="序号"
            width="120"
            type="index"
          ></el-table-column>
          <el-table-column
            align="center"
            label="角色名"
            width="240"
            prop="name"
          ></el-table-column>
          <el-table-column
            align="center"
            label="描述"
            prop="description"
          ></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="{ row }">
              <el-button size="small" type="success" @click="assiginPerm(row.id)">分配权限</el-button>
              <el-button size="small" type="primary" @click="editRole(row.id)"
                >编辑</el-button
              >
              <el-button size="small" type="danger" @click="delRole(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row type="flex" justify="end" style="height: 60px" align="middle">
          <el-pagination
            @current-change="getRoleList"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync="page.page"
            layout="prev,pager,next"
          />
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="公司信息">
        <el-alert
          title="对公司名称、公司地址、营业执照、公司地址的更新，将会使公司资料呗重新审核，请谨慎修改"
          type="info"
          show-icon
          :closable="false"
        />
        <el-form label-width="120px" style="margin-top: 50px">
          <el-form-item label="公司名称">
            <el-input v-model="formDate.name" disabled style="width: 400px" />
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input
              v-model="formDate.companyAddress"
              disabled
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="公司邮箱">
            <el-input
              v-model="formDate.mailbox"
              disabled
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="备注" style="width: 400px">
            <el-input
              disabled
              type="textarea"
              :rows="3"
              resize="none"
              style="width: 400px"
              v-model="formDate.remarks"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- 修改角色信息弹层 -->

    <el-dialog title="编辑角色" :visible.sync="showDialog">
      <!--  表单  -->
      <el-form
        ref="roleForm"
        label-width="120px"
        :model="roleForm"
        :rules="rules"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleForm.description" />
        </el-form-item>
      </el-form>
      <!-- footer -->

      <el-row type="flex" justify="center" slot="footer">
        <el-col :span="6">
          <el-button type="primary" @click="btnOk">确定</el-button>
          <el-button style="margin-right: 20px" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 分配权限弹层 -->
    <el-dialog title="分配权限" :visible.sync="showPermDialog" @click="btnPermCancel">
      <el-tree 
      ref="permTree"
      :data="permData" 
      :props="defaultProps" 
      show-checkbox 
      node-key="id"
      :default-checked-keys="selectChecks"
      :check-strictly="true"
      />
      <el-row type="flex" justify="center" slot="footer">
        <el-col :span="6">
          <el-button type="primary" @click="btnPermOk">确定</el-button>
          <el-button style="margin-right: 20px" @click="btnPermCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleList,
  getCompanyInfo,
  deleteRole,
  updateRole,
  getRoleDetail,
  addRole,
  assiginPerm
} from "@/api/setting";
import { mapGetters } from "vuex";
import { Message } from "element-ui";
import { getPermissionList } from '@/api/permission'
import { transListToTreeData } from '@/utils'
export default {
  name: "My-Setting",
  computed: {
    ...mapGetters(["companyId"]),
  },
  data() {
    return {
      list: [],
      page: {
        total: 0,
        page: 1,
        pagesize: 5,
      },
      formDate: {},
      showDialog: false,
      showPermDialog: false,
      roleForm: {},
      // 当前分配权限id
      roleId:null,
      // 权限数据
      permData:[],
      // 当前拥有的权限
      selectChecks:[],
      defaultProps:{
        label:'name'
      },
      rules: {
        nmae: [
          { required: true, message: "角色名字不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getRoleList();
    this.getCompanyInfo();
  },
  methods: {
    async btnPermOk() {
      await assiginPerm({
        id: this.roleId,
        permIds: this.$refs.permTree.getCheckedKeys()
      })
      this.showPermDialog = false
      this.$message.success('分配权限成功')
    },
    btnPermCancel() {
      this.selectChecks = []
      this.showPermDialog = false
    },
    // 分配权限
    async assiginPerm(id) {
      this.roleId = id
      this.permData =  transListToTreeData( await getPermissionList(),'0' )
      const { permIds } = await getRoleDetail(id)
      this.selectChecks = permIds
      this.showPermDialog = true
    },
    async editRole(id) {
      const res = await getRoleDetail(id);
      // console.log(res);
      this.roleForm = res;
      this.showDialog = true;
    },

    async btnOk() {
      try {
        await this.$refs.roleForm.validate();
        if (this.roleForm.id) {
          // 编辑
          await updateRole(this.roleForm);
          Message.success("修改成功");
        } else {
          //新增

          await addRole(this.roleForm);
          Message.success("添加成功");
        }
        this.getRoleList();
        this.showDialog = false;
      } catch (e) {
        Message.error(e);
        console.log(e);
      }
    },
    btnCancel() {
      this.roleForm = {};
      this.showDialog = false;
      this.$refs.roleForm.resetFields();
    },
    // 删除角色
    async delRole(id) {
      try {
        await this.$confirm("确定删除此角色？");
        await deleteRole(id);
        this.getRoleList();
        Message.success("删除成功");
      } catch (e) {
        Message.error(e);
      }
    },
    // 获取公司信息
    async getCompanyInfo() {
      const res = await getCompanyInfo(this.companyId);
      this.formDate = res;
    },

    // 获取列表数据
    async getRoleList() {
      const { total, rows } = await getRoleList(this.page);
      this.page.total = total;
      this.list = rows;
      // console.log(rows);
    },
  },
};
</script>

<style scoped lang='less'></style>